<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <script src="../vueJS/VUE.js"></script>
</head>

<body>
    <div id="root">
        <h2>名称{{name}}</h2>
        <h2>兴趣{{hobby}}</h2>
    </div> 
    <script type="text/javascript">
    Vue.config.productionTip = false
    let data1={
        name:'lzt',
        hobby:'code'
    }
    const vm = new Vue({//vm._data===data1，说明vm对里面的data进行了代理
        el:'#root',
        data:data1
    })
    //就是我们在vue里面添加了属性data，vm._data就是我们加入的数据，但是如果这样我们调用的话就需要{{_data.proper}}比较麻烦
    //于是vue做了数据代理，把属性data中的属性,代理到vue本身，这样直接可以{{proper}}来调用--->Obj.defineProper
    </script>
</body>
</html>